<template>
    <div class="container">
            <div class="box">
                <img class="close" @click="onClose()" src="../assets/common/close.png"/>
                <img class="poster" :src="src"/>
            </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: ['src'],
    methods: {
        onClose () {
            this.$emit('close')
        }
    }
})
</script>
<style scoped>
    .container{
        background-color: #00000080;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        display: flex !important;
        justify-content: center;
        flex-direction: column;
    }
    .box{
        display: flex;
        flex-direction: column;
        align-items: flex-end;

    }
    .poster{
        margin-top: 10px;
        width: 700px;
        height: 510px;
    }
    .close{
        cursor: pointer;
    }
</style>
